Skip to content

Add App Events Docs#496

Open
pinkeshmars wants to merge 1 commit intomainfrom
feature/app-events
Open

Add App Events Docs#496
pinkeshmars wants to merge 1 commit intomainfrom
feature/app-events

Conversation

@pinkeshmars
Copy link
Collaborator

Description

Add App Events Docs

Linear ticket and magic word Fixes DEVR-1055

Type of change

  • Typo fix
  • New feature
  • Enhancement to current docs
  • Removed outdated references
  • Update assets

@pinkeshmars pinkeshmars requested a review from PoojaB26 March 10, 2026 10:39
@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@ayushflow
Copy link

ayushflow commented Mar 12, 2026

Hey @pinkeshmars @PoojaB26 I am unable to test it on Codeflow
image

Let me try and run it locally

@pinkeshmars
Copy link
Collaborator Author

Hey @pinkeshmars @PoojaB26 I am unable to test it on Codeflow image

Let me try and run it locally

@ayushflow we always had issues with running on stackblitz. Instead, can you try running it locally?
You can check this guide.

Running it locally

  1. First, ensure you have Git installed. Then, go ahead and clone the repository into your desired directory.
git clone https://github.com/FlutterFlow/flutterflow-documentation.git
  1. Install Dependencies: Run npm install in your terminal to install the necessary dependencies.
  2. Preview Changes: To see your changes in real-time as you edit the files, you can run a local development server. This server will host your website and reflect the latest changes. Use the command npm run start.
  3. Build the Website: When you're ready, use npm run build to compile the website.

Copy link

@ayushflow ayushflow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall this is a well-structured doc — the intro/motivation, step-by-step walkthrough, examples, and FAQ are all solid. A few comments below, mostly around clarifying the Global vs Local processing distinction and aligning with a recent UI fix we shipped.

| **Number of handlers** | Exactly one (the assigned Action Block) | Many — any page or component can add a handler |
| **Subscription management** | Automatic — always active | Manual — handlers are added and cancelled using actions |
| **Best for** | App-wide concerns such as analytics, logging, authentication state, or global notifications | Page or component reactions such as refreshing lists, updating widgets, or syncing UI elements |

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: add a Processing row to this table — it's one of the most important behavioral differences between Global and Local events:

Global Local
Processing Sequential queue (events processed one at a time) Broadcast stream (all subscribers notified immediately)

This is the thing users will need to understand when debugging timing or ordering issues.

- **Include Event Data:** Enable this if the event needs to pass additional information when it fires.
- **Data Type:** If event data is enabled, select the **DataType** that defines the structure of the event payload.
- **Nullable:** Specify whether the event data can be `null`.
5. **If the scope is Global**, assign a handler **Action Block**. This Action Block runs automatically whenever the event is triggered and must accept the required parameters (context and, if enabled, the event data).

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The phrase "must accept the required parameters (context and, if enabled, the event data)" — "context" here refers to BuildContext which is a codegen concept. No-code users won't know what this means.

Suggest simplifying to: "This Action Block runs automatically whenever the event is triggered. If the event includes data, the Action Block must have a parameter matching the event's Data Type."

Same gap exists in the local handler setup (step 3 under "Handle the Event") — no mention of parameter matching there either.

3. Configure the action:
- **Event to Trigger:** Select the app event you created.
- **App Event Data:** If the event includes data, provide the values to pass with the event.
- **Wait for Completion:** If enabled (default), the action chain waits until the event finishes handling before continuing. Disable it for fire-and-forget behavior.
Copy link

@ayushflow ayushflow Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wait for Completion only applies to Global events. For local events, this flag has no effect at runtime — local events are always broadcast immediately to subscribers without checking this flag.

We've fixed this on the product side — the Wait for Completion field is now hidden in the UI when a local event is selected. The docs should reflect this by scoping the Wait for Completion bullet to global events only.

Suggested rewrite:

Wait for Completion (Global events only): If enabled (default), the event queue waits until the handler Action Block completes before processing the next queued event. Disable it for fire-and-forget behavior. This option is not shown for local events.

</div>
<p></p>

*(Optional)* If you want to stop listening later (for example, before navigating away), add a **Cancel Local App Event Handler** action and select the same event.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The example "before navigating away" slightly contradicts the tip on line 208 which says subscriptions auto-clean on page disposal. If navigating away already auto-cleans the subscription, why would you manually cancel before navigating?

Better example: "for example, after a certain condition is met or a toggle is switched off."


Here are a few things to remember:

- Events are **queued and processed sequentially**. If multiple events are triggered quickly, they run **one after another**, not in parallel.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This section needs to distinguish between Global and Local event processing:

  • "Events are queued and processed sequentially" is only accurate for Global events, which use a FIFO queue.
  • Local events use a broadcast stream — they're delivered to all active subscribers immediately when triggered. They don't queue or wait.

Suggested rewrite for the bullets:

  • Global events are queued and processed sequentially. If multiple global events are triggered quickly, they run one after another, not in parallel.
  • Local events are broadcast to all active subscribers immediately when triggered.
  • Wait for Completion (Global events only, enabled by default) makes the event queue wait until the handler Action Block completes before processing the next event. Disable it for fire-and-forget behavior.
  • Global events always run their assigned handler, no matter where the event is triggered.
  • Local event handlers exist only while their page or component is active. When the page is disposed, the subscription is automatically removed.

- `User Logged In` (not `Login`)
- `Cart Updated` (not `Update Cart`)
- `Payment Completed` (not `Process Payment`)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Naming inconsistency: this section shows space-separated names (User Logged In, Cart Updated) but earlier examples use camelCase (internetConnectionChanged, cartUpdated). FlutterFlow auto-converts display names to camelCase identifiers, but this could confuse users about what to type.

Suggest picking one convention consistently throughout — probably the display name format since that's what users actually type in the name field, with a note that the identifier is auto-generated as camelCase.

If the order seems unexpected, check whether some triggers have <b>Wait for Completion</b> set to <code>false</code>, which allows subsequent events to start before the previous event finishes.
</p>

</details> No newline at end of file

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This FAQ answer only mentions waitForCompletion but doesn't clarify that Global and Local events have fundamentally different processing models. A user with mixed event types could be confused.

Suggest adding: "Also note that global events are processed sequentially through a queue, while local events are broadcast immediately to all active subscribers and do not go through the queue."

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants